<template>
  <div class="app-container">
    <IntroduceTip :value="11"></IntroduceTip>
    <div class="custom_card_0">
      <div class="menuTabs-container">
<!--        <div class="row_name" style="min-width:70px !important;padding-top:12px">-->
<!--          <span class="row_title">数据总览</span>-->
<!--        </div>-->
        <div  class="row_name row_tabs">
          <div :class="{  tabs_item: true }">
            <div class="tabs_item_text">
              <p class="tabs_item_count">
                {{ screening.orderNum }}
              </p>
              <p class="tabs_item_name">订单数(个)</p>
            </div>
          </div>

          <div :class="{  tabs_item: true }">
            <div class="tabs_item_text">
              <p class="tabs_item_count">
                ￥{{ (Number(screening.unpaidRent)+ Number(screening.paidRent)).toFixed(2) }}
                  <el-tooltip placement="right" effect="dark">
                    <div slot="content" style="font-size: 14px">
                      应收:￥{{screening.unpaidRent||0}}<br/>
                      已收:￥{{screening.paidRent||0}}<br/>
                    </div>
                    <el-button type="text" size="mini" style="padding: 0"><i class="el-icon-warning-outline"></i></el-button>
                </el-tooltip>
              </p>
              <p class="tabs_item_name">租金(元)</p>
            </div>
          </div>

          <div :class="{  tabs_item: true }">
            <div class="tabs_item_text">
              <p class="tabs_item_count">
                ￥{{  (Number(screening.unpaidDeposit)+ Number(screening.paidDeposit)).toFixed(2) }}
                  <el-tooltip placement="right" effect="dark">
                    <div slot="content" style="font-size: 14px">
                      应收:￥{{screening.unpaidDeposit||0}}<br/>
                      已收:￥{{screening.paidDeposit||0}}<br/>
                    </div>
                    <el-button type="text" size="mini" style="padding: 0"><i class="el-icon-warning-outline"></i></el-button>
                </el-tooltip>
              </p>
              <p class="tabs_item_name">车辆押金(元)</p>
            </div>
          </div>

          <div :class="{  tabs_item: true }">
            <div class="tabs_item_text">
              <p class="tabs_item_count">
                ￥{{  (Number(screening.unpaidIllegal)+ Number(screening.paidIllegal)).toFixed(2) }}
                  <el-tooltip placement="right" effect="dark">
                    <div slot="content" style="font-size: 14px">
                      应收:￥{{screening.unpaidIllegal||0}}<br/>
                      已收:￥{{screening.paidIllegal||0}}<br/>
                    </div>
                    <el-button type="text" size="mini" style="padding: 0"><i class="el-icon-warning-outline"></i></el-button>
                </el-tooltip>
              </p>
              <p class="tabs_item_name">违章押金(元)</p>
            </div>
          </div>

          <div :class="{  tabs_item: true }">
            <div class="tabs_item_text">
              <p class="tabs_item_count">
                ￥{{ ( Number(screening.unpaidVehicleTotal)+ Number(screening.paidVehicleTotal)).toFixed(2) }}
                  <el-tooltip placement="right" effect="dark">
                    <div slot="content" style="font-size: 14px">
                      应收:￥{{screening.unpaidVehicleTotal||0}}<br/>
                      已收:￥{{screening.paidVehicleTotal||0}}<br/>
                    </div>
                    <el-button type="text" size="mini" style="padding: 0"><i class="el-icon-warning-outline"></i></el-button>
                </el-tooltip>
              </p>
              <p class="tabs_item_name">车损单独收费(元)</p>
            </div>
          </div>

          <div :class="{  tabs_item: true }">
            <div class="tabs_item_text">
              <p class="tabs_item_count">
                ￥{{ ( Number(screening.unpaidViolation)+ Number(screening.paidViolation)).toFixed(2)}}
                  <el-tooltip placement="right" effect="dark">
                    <div slot="content" style="font-size: 14px">
                      应收:￥{{screening.unpaidViolation||0}}<br/>
                      已收:￥{{screening.paidViolation||0}}<br/>
                    </div>
                    <el-button type="text" size="mini" style="padding: 0"><i class="el-icon-warning-outline"></i></el-button>
                </el-tooltip>
              </p>
              <p class="tabs_item_name">违章单独收费(元)</p>
            </div>
          </div>

          <div :class="{  tabs_item: true }">
            <div class="tabs_item_text">
              <p class="tabs_item_count">
                ￥{{  (Number(screening.unReturnRent)+ Number(screening.returnRent) ).toFixed(2)}}
                  <el-tooltip placement="right" effect="dark">
                    <div slot="content" style="font-size: 14px">
                      应退:￥{{screening.unReturnRent||0}}<br/>
                      已退:￥{{screening.returnRent||0}}<br/>
                    </div>
                    <el-button type="text" size="mini" style="padding: 0"><i class="el-icon-warning-outline"></i></el-button>
                </el-tooltip>
              </p>
              <p class="tabs_item_name">租金退款(元)</p>
            </div>
          </div>

          <div :class="{  tabs_item: true }">
            <div class="tabs_item_text">
              <p class="tabs_item_count">
                ￥{{  (Number(screening.unReturnDeposit)+ Number(screening.returnDeposit)).toFixed(2) }}
                  <el-tooltip placement="right" effect="dark">
                    <div slot="content" style="font-size: 14px">
                      应退:￥{{screening.unReturnDeposit||0}}<br/>
                      已退:￥{{screening.returnDeposit||0}}<br/>
                    </div>
                    <el-button type="text" size="mini" style="padding: 0"><i class="el-icon-warning-outline"></i></el-button>
                </el-tooltip>
              </p>
              <p class="tabs_item_name">车辆押金退款(元)</p>
            </div>
          </div>

          <div :class="{  tabs_item: true }">
            <div class="tabs_item_text">
              <p class="tabs_item_count">
                ￥{{  (Number(screening.unReturnIllegal)+ Number(screening.returnIllegal)).toFixed(2) }}
                  <el-tooltip placement="right" effect="dark">
                    <div slot="content" style="font-size: 14px">
                      应退:￥{{screening.unReturnIllegal||0}}<br/>
                      已退:￥{{screening.returnIllegal||0}}<br/>
                    </div>
                    <el-button type="text" size="mini" style="padding: 0"><i class="el-icon-warning-outline"></i></el-button>
                </el-tooltip>
              </p>
              <p class="tabs_item_name">违章押金退款(元)</p>
            </div>
          </div>

          <div :class="{  tabs_item: true }">
            <div class="tabs_item_text">
              <p class="tabs_item_count">￥{{ screening.total||0 }}</p>
              <p class="tabs_item_name">营收总计(元)</p>
            </div>
          </div>

        </div>
      </div>
    </div>


    <div class="custom_card_0">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-row >
          <el-col span="6">
            <el-form-item label="所属门店" prop="storeId">
              <el-select
                v-model="queryParams.storeId"
                placeholder="请选择所属门店"
                clearable
                filterable
                remote
              >
                <el-option
                  v-for="(item, i) in storeList"
                  :key="item.storeId"
                  :label="item.storeName"
                  :value="item.storeId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col span="6">
          <el-form-item label="车牌号" prop="carNo">
            <el-input
              v-model="queryParams.carNo"
              placeholder="请输入车牌号"
              clearable

              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          </el-col>
          <el-col span="6">
          <el-form-item label="车型" prop="modelName">
            <el-input
              v-model="queryParams.modelName"
              placeholder="请输入车型"
              clearable

              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          </el-col>
          <el-col span="6">
          <el-form-item label="订单状态" prop="orderStatus">
            <el-select v-model="queryParams.orderStatus" clearable  >
              <el-option label="全部" :value="0"></el-option>
              <el-option label="已还车" :value="1"></el-option>
              <el-option label="未还车" :value="2"></el-option>
            </el-select>
          </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col span="6">
          <el-form-item label="下单人" prop="orderingPersonnelId">
            <el-select v-model="queryParams.orderingPersonnelId" clearable >
              <el-option v-for="item in userList" :key="item.userId" :label="item.userName" :value="item.userId" />
            </el-select>
          </el-form-item>
          </el-col>
          <el-col span="6">
          <el-form-item label="负责人" prop="headId">
            <el-select v-model="queryParams.headId" clearable  >
              <el-option v-for="item in userList" :key="item.userId" :label="item.userName" :value="item.userId" />
            </el-select>
          </el-form-item>
          </el-col>
          <el-col span="6">
          <el-form-item label="收发车员" prop="createBy">
            <el-select v-model="queryParams.createBy" clearable  >
              <el-option v-for="item in userList" :key="item.userId" :label="item.userName" :value="item.userId" />
            </el-select>
          </el-form-item>
          </el-col>
          <el-col span="6">
        <el-form-item label="订单来源" prop="orderSource">
          <el-select v-model="queryParams.orderSource"  >
            <el-option label="全部订单" :value="0"></el-option>
            <el-option label="线下订单" :value="1"></el-option>
            <el-option label="代客下单" :value="2"></el-option>
            <el-option label="客户小程序下单" :value="3"></el-option>
            <template v-for="dict in dict.type.sys_order_source">
              <el-option v-if="dict.value>3" :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
            </template>
          </el-select>
        </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col span="20" style="display: flex;justify-content: space-between;">
        <el-form-item label="还车时间" prop="returnStartTime">
          <el-date-picker v-model="returnTime" type="daterange"
                          range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="取车时间" prop="takeStartTime">
          <el-date-picker v-model="takeTime" type="daterange"
                          range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="创建时间" prop="createStartTime">
          <el-date-picker v-model="createTime" type="daterange"
                          :picker-options="{disabledDate: data=> new Date(data).getTime() >( new Date().getTime())}"
                          range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
        </el-form-item>
          </el-col>
          <el-col span="4">
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="custom_card">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button

            class="sec-plain-btn"
            size="medium"
            icon="el-icon-download"
            :loading="exportLoading"
            @click="handleExport"
            v-hasPermi="['orderRevenueStatistics:orderRevenueStatistics:export']"
          >导出
          </el-button>
        </el-col>

        <el-col :span="1.5">
          <el-tooltip placement="right-start" effect="dark">
            <div slot="content" style="font-size: 14px">
              1、订单数：统计车辆全部状态的订单总数<br/>
              2、订单金额：车辆关联订单的订单金额<br/>
              3、财务应收：车辆订单关联的财务模块<br/>&nbsp;&nbsp;&nbsp;&nbsp;-运营账单-应收账单数据。（月租订单-运营账<br/>&nbsp;&nbsp;&nbsp;&nbsp;单的应收数据目前不统计入内）<br/>
              4、财务已收：车辆订单关联的财务模块<br/>&nbsp;&nbsp;&nbsp;&nbsp;-运营账单-已收账单数据<br/>
              5、财务应退：车辆订单关联的财务模块<br/>&nbsp;&nbsp;&nbsp;&nbsp;-运营账单-应退账单数据<br/>
              6、财务已退：车辆订单关联的财务模块<br/>&nbsp;&nbsp;&nbsp;&nbsp;-运营账单-已退账单数据<br/>
              7、订单收支合计：财务应收+财务已收<br/>&nbsp;&nbsp;&nbsp;&nbsp;-财务应退-财务已退<br/>
              8、租金：车辆租金及续租金额<br/>
              9、车辆押金：车辆押金费用，含预授权金额<br/>
              10、违章押金：违章押金费用，含预授权金额<br/>
              11、车损费：还车验车产生费用，单独收费金额<br/>
              12、违章费：客户违章处理产生费用，单独收费金额<br/>
            </div>
            <el-button type="text">字段说明&nbsp;<i class="el-icon-warning-outline"></i></el-button>
          </el-tooltip>
        </el-col>
        <el-col :span="1.5">
          <el-tooltip placement="right-start" effect="dark">
            <div slot="content" style="font-size: 14px">
              默认统计某段时间还车的日租订单财务收支情况，商家可根据需求调整筛选项查看数据
            </div>
            <el-button type="text">功能说明&nbsp;<i class="el-icon-warning-outline"></i></el-button>
          </el-tooltip>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="orderRevenueStatisticsList">
        <el-table-column label="车牌号" min-width="100" align="center" prop="carNo"/>
        <el-table-column label="车型" min-width="200" show-overflow-tooltip align="center" prop="modelName"/>
        <el-table-column label="所属门店" min-width="200" show-overflow-tooltip align="center" prop="storeName" />
        <el-table-column label="订单数(个)" align="center" prop="orderNum"/>

        <el-table-column label="订单金额(元)" align="center" v-if="openColumn1">
          <template slot="header" slot-scope="scope">
            订单金额(元) <el-button type="text" size="mini" @click="openColumn1=!openColumn1">收起</el-button>
          </template>
          <el-table-column label="租金" align="center" prop="costRent"/>
          <el-table-column label="车辆押金" align="center" prop="costDeposit"/>
          <el-table-column label="违章押金" align="center" prop="costIllegal"/>
          <el-table-column label="车损费" align="center" prop="costVehicle"/>
          <el-table-column label="违章费" align="center" prop="costViolation"/>
          <el-table-column label="金额合计" align="center" prop="costTotal"/>
        </el-table-column>

        <el-table-column label="订单金额(元)" align="center" v-if="!openColumn1">
          <template slot="header" slot-scope="scope">
            订单金额(元) <el-button type="text" size="mini" @click="openColumn1=!openColumn1">展开</el-button>
          </template>
          <el-table-column label="合计" min-width="160" align="center" prop="costTotal"/>
        </el-table-column>


        <el-table-column label="财务应收(元)" align="center"  v-if="openColumn2">
          <template slot="header" slot-scope="scope">
            财务应收(元) <el-button type="text" size="mini" @click="openColumn2=!openColumn2">收起</el-button>
          </template>
          <el-table-column label="租金" align="center" prop="unpaidRent"/>
          <el-table-column label="车辆押金" align="center" prop="unpaidDeposit"/>
          <el-table-column label="违章押金" align="center" prop="unpaidIllegal"/>
          <el-table-column label="车损费" align="center" prop="unpaidVehicle"/>
          <el-table-column label="违章费" align="center" prop="unpaidViolation"/>
          <el-table-column label="合计" align="center" prop="unpaidTotal"/>
        </el-table-column>
        <el-table-column label="财务应收(元)" align="center" v-if="!openColumn2">
          <template slot="header" slot-scope="scope">
            财务应收(元) <el-button type="text" size="mini" @click="openColumn2=!openColumn2">展开</el-button>
          </template>
          <el-table-column label="合计" min-width="160" align="center" prop="unpaidTotal"/>
        </el-table-column>


        <el-table-column label="财务已收(元)" align="center" v-if="openColumn3">
          <template slot="header" slot-scope="scope">
            财务已收(元) <el-button type="text" size="mini" @click="openColumn3=!openColumn3">收起</el-button>
          </template>
          <el-table-column label="租金" align="center" prop="paidRent"/>
          <el-table-column label="车辆押金" align="center" prop="paidDeposit"/>
          <el-table-column label="违章押金" align="center" prop="paidIllegal"/>
          <el-table-column label="车损费" align="center" prop="paidVehicle"/>
          <el-table-column label="违章费" align="center" prop="paidViolation"/>
          <el-table-column label="金额合计" align="center" prop="paidTotal"/>
        </el-table-column>
        <el-table-column label="财务已收(元)" align="center" v-if="!openColumn3">
          <template slot="header" slot-scope="scope">
            财务已收(元) <el-button type="text" size="mini" @click="openColumn3=!openColumn3">展开</el-button>
          </template>
          <el-table-column label="合计" min-width="160" align="center" prop="paidTotal"/>
        </el-table-column>


        <el-table-column label="财务应退(元)" align="center" v-if="openColumn4">
          <template slot="header" slot-scope="scope">
            财务应退(元) <el-button type="text" size="mini" @click="openColumn4=!openColumn4">收起</el-button>
          </template>
          <el-table-column label="租金" align="center" prop="unReturnRent"/>
          <el-table-column label="车辆押金" align="center" prop="unReturnDeposit"/>
          <el-table-column label="违章押金" align="center" prop="unReturnIllegal"/>
          <el-table-column label="金额合计" align="center" prop="unReturnTotal"/>
        </el-table-column>
        <el-table-column label="财务应退(元)" align="center" v-if="!openColumn4">
          <template slot="header" slot-scope="scope">
            财务应退(元) <el-button type="text" size="mini" @click="openColumn4=!openColumn4">展开</el-button>
          </template>
          <el-table-column label="合计" min-width="160" align="center" prop="unReturnTotal"/>
        </el-table-column>

        <el-table-column label="财务已退(元)" align="center"  v-if="openColumn5">
          <template slot="header" slot-scope="scope">
            财务已退(元) <el-button type="text" size="mini" @click="openColumn5=!openColumn5">收起</el-button>
          </template>
          <el-table-column label="租金" align="center" prop="returnRent"/>
          <el-table-column label="车辆押金" align="center" prop="returnDeposit"/>
          <el-table-column label="违章押金" align="center" prop="returnIllegal"/>
          <el-table-column label="金额合计" align="center" prop="returnTotal"/>
        </el-table-column>
        <el-table-column label="财务已退(元)" align="center" v-if="!openColumn5">
          <template slot="header" slot-scope="scope">
            财务已退(元) <el-button type="text" size="mini" @click="openColumn5=!openColumn5">展开</el-button>
          </template>
          <el-table-column label="合计" min-width="160" align="center" prop="returnTotal"/>
        </el-table-column>

        <el-table-column label="订单收支合计" min-width="100" align="center" prop="total"/>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import {orderRevenue, exportOrderRevenue,dataScreening} from '@/api/bills/financial';
import {formatDate} from "@/utils";
import MmvOrderRenewal from "@/views/order/orderBasic/orderRenewal";
import NewMenuTabs from "@/components/custom/newMenuTabs";
import {getStoreList} from "@/api/car/model";
import {userlist} from "@/api/system/user";

export default {
  name: "OrderRevenueStatistics",
  components: {
    NewMenuTabs
  },

  dicts: ['sys_order_source'],
  data() {
    return {
      showTip:true,
      openColumn1:false,
      openColumn2:false,
      openColumn3:false,
      openColumn4:false,
      openColumn5:false,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      takeTime: [],
      returnTime: [new Date(new Date().getTime() - 31 * 24 * 60 * 60 * 1000), new Date()],
      createTime: [],
      // 订单营收统计表格数据
      orderRevenueStatisticsList: [],
      screening:{
        "orderNum": "0",
        "costRent": "0",
        "costDeposit": "0",
        "costIllegal": "0",
        "costVehicle": "0",
        "costViolation": "0",
        "costTotal": "0",
        "unpaidRent": "0",
        "unpaidDeposit": "0",
        "unpaidIllegal": "0",
        "unpaidVehicle": "0",
        "unpaidViolation": "0",
        "unpaidTotal": "0",
        "paidRent": "0",
        "paidDeposit": "0",
        "paidIllegal": "0",
        "paidVehicle": "0",
        "paidViolation": "0",
        "paidTotal": "0",
        "unReturnRent": "0",
        "unReturnDeposit": "0",
        "unReturnIllegal": "0",
        "unReturnTotal": "0",
        "returnRent": "0",
        "returnDeposit": "0",
        "returnIllegal": "0",
        "returnTotal": "0",
        "unpaidVehicleTotal": "0",
        "paidVehicleTotal": "0",
        "total": "0"
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        storeId: null,
        carNo: null,
        modelName: null,
        orderStatus: 1,
        orderSource: 0,

        orderingPersonnelId: null,
        headId: null,
        createBy: null,

        returnStartTime: null,
        returnEndTime: null,

        takeStartTime: null,
        takeEndTime: null,

        createStartTime: null,
        createEndTime: null,
      },

      userList: [],
      storeList:[],

      tabs_list1: [
        {key: '1', name: '订单数(个)', count: 0},
        {key: '2', name: '租金(元)', count: 0},
        {key: '3', name: '车辆押金(元)', count: 0},
        {key: '4', name: '违章押金(元)', count: 0},
        {key: '5', name: '车损单独收费(元)', count: 0},
        {key: '6', name: '违章费(元)', count: 0},
        {key: '7', name: '租金退款(元)', count: 0},
        {key: '8', name: '车辆押金退款(元)', count: 0},
        {key: '9', name: '违章押金退款(元)', count: 0},
        {key: '10', name: '营收总计(元)', count: 0}
      ],
    };
  },
  created() {
    this.getList();
    getStoreList().then((response) => {
      this.storeList = response.data
    })
    userlist({}).then((response) => {
      this.userList = response.data
    })
  },
  methods: {
    closeTip(){
      this.showTip = false;
    },
    /** 查询订单营收统计列表 */
    getList() {
      if (this.returnTime) {
        this.queryParams.returnStartTime = this.parseTime(this.returnTime[0], '{y}-{m}-{d} 00:00:00')
        this.queryParams.returnEndTime = this.parseTime(this.returnTime[1], '{y}-{m}-{d} 23:59:59')
      }else{
        this.queryParams.returnStartTime = null
        this.queryParams.returnEndTime = null
      }

      if (this.takeTime) {
        this.queryParams.takeStartTime = this.parseTime(this.takeTime[0], '{y}-{m}-{d} 00:00:00')
        this.queryParams.takeEndTime = this.parseTime(this.takeTime[1], '{y}-{m}-{d} 23:59:59')
      }else{
        this.queryParams.takeStartTime = null
        this.queryParams.takeEndTime = null
      }

      if (this.createTime) {
        this.queryParams.createStartTime = this.parseTime(this.createTime[0], '{y}-{m}-{d} 00:00:00')
        this.queryParams.createEndTime = this.parseTime(this.createTime[1], '{y}-{m}-{d} 23:59:59')
      }else{
        this.queryParams.createStartTime = null
        this.queryParams.createEndTime = null
      }

      this.loading = true;
      orderRevenue(this.queryParams).then(response => {
        this.orderRevenueStatisticsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
      dataScreening(this.queryParams).then(response => {
        this.screening = response.data;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.returnTime = [new Date(new Date().getTime() - 31 * 24 * 60 * 60 * 1000), new Date()]
      this.takeTime = []
      this.createTime = []
      this.handleQuery();
    },

    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$modal.confirm('是否确认导出所有数据项？').then(() => {
        this.exportLoading = true;
        return exportOrderRevenue(queryParams);
      }).then(response => {
        this.$download.name(response.msg);
        this.exportLoading = false;
      }).catch(() => {
      });
    }
  }
};
</script>
<style scoped lang="scss">
.menuTabs-container {
  display: flex;
  vertical-align: middle;
// justify-content: center;
.row_title_tip {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: #5473e8;
}
.row_title {
  margin: 8px 4px;
  display: inline-block;
}
.row_name {
  display: inline-block;
  color: #606266;
  font-size: 14px;
  font-weight: 700;
}
.row_tabs {
  display: inline-block;
  margin-bottom: 12px;
.tabs_item {
  text-align: center;
  display: inline-block;
  border: 1px solid #e2e7eb;
  margin-right: 12px;
  border-radius: 4px;
  box-shadow: 0px 0px 10px #eee;
  padding: 0px 20px;
  margin-bottom: 12px;
.tabs_item_text {
  display: flex;
  vertical-align: middle;
  display: inline-block;
  text-align: center;
  color: #333;
.tabs_item_name {
  font-weight: 700;
  margin: 8px 0 4px 0;
}
.tabs_item_count {
  margin: 4px 0 8px 0;
  font-size: 18px;
}
}
}
.tabs_item:hover {
  cursor: pointer;
  box-shadow: 0px 0px 10px #ccc;
}
.tabs_item:last-child {
  margin-right: 0px;
}
.active {
  border: 0px;
  background-image: linear-gradient(270deg, #8dabf5 0%, #5473e8 100%);
.tabs_item_name {
  font-weight: 700;
  color: #fff;
  margin: 8px 0 4px 0;
}
.tabs_item_count {
  margin: 4px 0 8px 0;
  color: #fff;
  font-size: 18px;
}
}
}
.row_tabs:last-child {
  margin-bottom: 0px;
}
}

::v-deep .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner{
  width: 250px !important;
}
</style>
